<html>
<head>
	<title>Dashboard - H!Indonesia</title>
	<script type="text/javascript" src="script/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="script/plugins/jquery.tabify.js"></script>
	<script type="text/javascript" src="script/plugins/jquery.tipsy.js"></script>
	<script type="text/javascript" src="script/plugins/jquery.collapse.js"></script>
	<script type="text/javascript" src="script/plugins/jquery.validity.js"></script>
	<script type="text/javascript" src="script/jquery-ui.js"></script>
	<script type="text/javascript" src="script/common.js"></script>
	<link rel="stylesheet" type="text/css" href="css/960.css" />
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<link rel="stylesheet" type="text/css" href="css/plugins/tipsy.css" />
	<link rel="stylesheet" type="text/css" href="css/plugins/validity.css" />
	<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
	<script type="text/javascript">
		(function( $ ) {
			$.validity.outputs.custom = {
                start:function(){ 
                    $("input:text")
                        .addClass('success')
                        .removeClass('error');
                },
                
                end:function(results) {
                    // If not valid and scrollTo is enabled, scroll the page to the first error.
                    if (!results.valid && $.validity.settings.scrollTo) {
                        location.hash = $(".fail:eq(0)").attr('id')
                    }
                },
                
                raise:function($obj, msg){
                    $obj
                        // .css({borderColor:'red', borderWidth: "1px"})
                        .addClass('error');
                },
                
                // Just raise the error on the last input.
                raiseAggregate:function($obj, msg){ 
                    this.raise($($obj.get($obj.length - 1)), msg); 
                }
            }
            
            $.validity.setup({ outputMode:'custom' });


			function validateMyAjaxInputs() {

				$.validity.start();
				// Validator methods go here:
				$("#title-ci").require();
				$("#first-name-ci").require();
				$("#birth-date-ci").require();	

				// End the validation session:
				var result = $.validity.end();
				return result.valid;
			}
			
			$.fn.clearForm = function() {
				return this.each(function() {
				var type = this.type, tag = this.tagName.toLowerCase();
				if (tag == 'form')
				return $(':input',this).clearForm();
				if (type == 'text' || type == 'password' || tag == 'textarea')
				this.value = '';
				else if (type == 'checkbox' || type == 'radio')
				this.checked = false
				else if (tag == 'select')
				this.selectedIndex = -1;
				});
			};

			$(function(){
				$("#contact-details").submit(function () {
					console.log(validateMyAjaxInputs());
					if (validateMyAjaxInputs()) { //  procced only if form has been validated ok with validity
						var str = $(this).serialize();
						$.ajax({
							type: "POST",
							url: "controller/dashboard",
							data: str,
							success: function (msg) {
								$("#formstatus").ajaxComplete(function (event, request, settings) {
									if (msg == 'OK') { // Message Sent? Show the 'Thank You' message
										result = '<div class="successmsg">Your message has been sent. Thank you!</div>';
										$('#contact-details').clearForm();
									} else {
										result = msg;
									}
									$(this).html(result);
								});
							}
				
						});
						return false;
					}
				});
			});
		})( jQuery );

		$(function(){
			$("#tab-dashboard, #tab-profile, #tab-setting").tabify();
			$(".datepicker").datepicker({
				changeMonth: true,
				changeYear: true,
				yearRange : 'c-65:c-0'
			});
		});
	</script>
</head>
<body>
	<div class="container_24">
		<header>
			<div class="header-wrapper clearfix">
				<div id="top-bar" class="grid_24">
					<div class="login-box logged-in">
						<a href="#" title="Profile Dani Taufani"><img src="img/static/user.png" alt="Dani Taufani">Dani Taufani</a>
						<div class="my-account">
							<ul>
								<li><a href="#">My Book</a></li>
								<li><a href="#">My Trip Plan</a></li>
								<li><a href="#">My Review</a></li>
								<li><a href="#">Update Profile</a></li>
								<li><a href="#">Account Setting</a></li>
								<li><a href="#">Sign Out</a></li>
							</ul>
						</div>
					</div>
					<div class="shop-cart">
						<a href="#" title="2 items in your cart"><i class="icon-shopping-cart"></i><sup>2</sup></a>
					</div>
					<div class="search-box">
						<button class="search-trigger"></button>
						<input type="text" id="search-keyword" placeholder="search">
					</div>
				</div>
				<div id="site-logo" class="grid_7">
					<a href="#">
						<img src="img/assets/logo.png" alt="H!Indonesia | Online Tourism Information and Booking Ticket"> 
					</a>
				</div>
				<nav id="top-nav" class="grid_17">
					<ul id="menu">
						<li><a href="#">home</a></li>
						<li class="drop"><a href="#">book</a>
							<ul>
								<li><a href="#">flight</a></li>
								<li><a href="#">hotel</a></li>
							</ul>
						</li>
						<li><a href="#">plan</a></li>
						<li><a href="#">explore</a></li>
						<li><a href="#">news</a></li>
						<li><a href="#">travel notes</a></li>
						<li><a href="#">travel guide</a></li>
						<li><a href="#">faq</a></li>
						<li><a href="#">about us</a></li>
					</ul>
				</nav>
			</div>
		</header>
		<section class="sidebar-left grid_8">
			<div class="dashboard-left">
				<h2>Dashboard</h2>
				<div class="data-user clearfix">
					<div class="user-left">
						<a href="#" title="Change Profile Picture"><img src="img/static/user.png" alt="Dani Taufani"/></a>
					</div>
					<div class="user-right">
						<h3>Dani Taufani</h3>
						<em>Bandung, Jawa Barat</em>
					</div>
				</div>
				<ul id="tab-dashboard" class="tabs-menu clearfix">
	                <li class="active">
	                	<a href="#book"><i class="icon-calendar"></i>My Book</a>
	                </li>
	                <li>
	                	<a href="#trip-plan"><i class="icon-briefcase"></i>My Trip Plan</a>
	                </li>
	                <li>
	                	<a href="#review"><i class="icon-comment"></i>My Review</a>
	                </li>
	                <li>
	                	<a href="#profile"><i class="icon-user"></i>Update Profile</a>
	                </li>
	                <li>
	                	<a href="#account-setting"><i class="icon-wrench"></i>Account Setting</a>
	                </li>
	            </ul>
        	</div>
		</section>
		<section class="main-content grid_16">
			<div class="dashboard-content">
				<div id="book" class="tabs-content clearfix">
					<h2>My Book 
						<div class="input-search">
							<input type="text" name="search-order"/><button><img src="img/icons/icon-search-dark.png" alt="search"/></button>
						</div>
					</h2>
	                <div class="book-content">
						<table class="table">
							<thead>
								<tr>
									<th>Order Time</th>
									<th>Order ID</th>
									<th>Name</th>
									<th>Category</th>
									<th>Status</th>
									<th></th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>28 Apr 2013</td>
									<td class="order-id">#12348454</td>
									<td class="name-order">Jakarta (CGK) - Bali (DPS)</td>
									<td>Flights</td>
									<td><span class="order">Order Cart</span></td>
									<td class="action"><a href="#" class="button" title="View Details">View</a></td>
								</tr>
								<tr>
									<td>28 Apr 2013</td>
									<td class="order-id">#12348459</td>
									<td class="name-order">The Aston Braga Hotel</td>
									<td>Hotels</td>
									<td><span class="booked">Booked</span></td>
									<td class="action"><a href="#" class="button" title="View Details">View</a></td>
								</tr>
							</tbody>
						</table>
	                </div>
	            </div>
	            <div id="trip-plan" class="tabs-content clearfix">
	            	<h2>Trip Plan</h2>
	                <div class="trip-plan-content">
	                    <p>Sorry, this feature is not available yet.</p>
	                </div>
	            </div>
	            <div id="review" class="tabs-content clearfix">
					<h2>My Review</h2>
	                <div class="review-content">
	                	 <p>Sorry, this feature is not available yet.</p>
	                </div>
	            </div>
	            <div id="profile" class="tabs-content clearfix">
	            	<h2>Update Profile</h2>
	                <div class="profile-content">
	                    <ul id="tab-profile" class="tabs-menu clearfix">
	                        <li class="active">
	                            <a href="#personal-details">Personal Details</a>
	                        </li>
	                        <li>
	                            <a href="#address">Address</a>
	                        </li>
	                        <li>
	                            <a href="#social-connect">Social Connect</a>
	                        </li>
	                    </ul>
	                    <div id="personal-details" class="tabs-content clearfix">
	                    	<form id="contact-details" action="javascript:void(0);">
		                    	<div class="cols clearfix">
									<p class="left">
									    <label for="title-ci">Title<span class="note-required">*</span></label><br>
									    <select id="title-ci" name="title-ci" tabindex="">
									    	<option value="">Select Title</option>
									        <option value="Mr">Mr.</option>
									        <option value="Mrs">Mrs.</option>
									        <option value="Ms">Ms.</option>
									    </select>
									</p>
			                    </div>
			                    <div class="cols clearfix">
			                        <p class="left grid_7">
			                            <label for="first-name-ci">First Name<span class="note-required">*</span></label><br>
			                            <input type="text" id="first-name-ci" name="first-name-ci" value="">
			                        </p>
			                         <p class="right grid_7">
			                            <label for="last-name-ci">Last Name</label><br>
			                            <input type="text" id="last-name-ci" name="last-name-ci" value="">
			                        </p>
			                    </div>
			                    <div class="cols clearfix">
			                        <p class="left grid_7">
										<label for="phone-primary">Phone Number
											<span tooltip="Format: (e.g. +62265636)" class="star-notice"></span>
											<span class="note-required">*</span>
										</label><br>
										<input type="text" id="phone-primary" name="phone-primary" value="+62">
										<span class="help-block">Format phone number must begin with your country code.<br> Example: +6221030293. 
											<a class="search-code">Search Country Code</a>
										</span>
			                        </p>
									<p class="right grid_7">
			                            <label for="phone-other">Mobile Phone Number
											<span tooltip="Format: (e.g. +6286665636)" class="star-notice"></span>
										</label><br>
			                            <input type="text" id="mobile-phone" name="mobile-phone" value="+62">
			                        </p>
			                    </div>
			                     <div class="cols clearfix">
			                        <p class="left grid_7">
			                            <label for="birth-date-ci">Birth Date<span class="note-required">*</span></label><br>
			                            <input type="text" id="birth-date-ci" name="birth-date-ci" class="datepicker">
			                        </p>
			                        <p class="right grid_7">
			                            <label for="id-a1">ID Card Number (KTP /SIM /Student Card)<span tooltip="Must be in digit" class="star-notice"></span></label><br>
			                            <input type="text" id="id-a1" name="id-a1" value="">
			                        </p>
			                    </div>
			                    <div class="submit clearfix">
			                    	<input type="submit" value="Update" class="button"/>
			                    </div>
			                </form>
	                    </div>
	                    <div id="address" class="tabs-content clearfix">
	                    	<div class="cols clearfix">
		                        <p class="left grid_7">
		                            <label for="country-ci">Country<span class="note-required">*</span></label><br>
		                            <input type="text" id="country-ci" name="country-ci"/>
		                        </p>
		                         <p class="right grid_7">
		                            <label for="state-ci">State<span class="note-required">*</span></label><br>
		                            <input type="text" id="state-ci" name="state-ci"/>
		                        </p>
		                    </div>
		                    <div class="cols clearfix">
		                        <p class="left grid_7">
		                            <label for="city-ci">City<span class="note-required">*</span></label><br>
		                            <input type="text" id="city-ci" name="city-ci"/>
		                        </p>
		                         <p class="right grid_7">
		                            <label for="postcode-ci">Postal Code</label><br>
		                            <input type="text" id="postcode-ci" name="postcode-ci"/>
		                        </p>
		                    </div>
		                    <div class="submit clearfix">
		                    	<input type="submit" value="Update" class="button"/>
		                    </div>
	                    </div>
	                    <div id="social-connect" class="tabs-content clearfix">
	                    	<div class="rows">
	                    		<p class="left grid_5">
	                    			<a id="connect-fb" href="#">Login with Facebook</a>
	                    		</p>
	                    		<p class="right grid_9">By connecting to Facebook, Hi-Indonesia.com will be able to personalize your experience.</p>
	                    	</div>
	                    	<hr>
	                    	<div class="rows">
	                    		<p class="left grid_5">
	                    			<a id="connect-twitter" href="#">Login with Twitter</a>
	                    		</p>
	                    		<p class="right grid_9">By connecting to Twitter, Hi-Indonesia.com will be able to personalize your experience.</p>
	                    	</div>
	                    </div>
	                </div>
	            </div>
	            <div id="account-setting" class="tabs-content clearfix">
	            	<h2>Account Setting</h2>
	                <div class="account-setting-content">
						 <ul id="tab-setting" class="tabs-menu clearfix">
	                        <li class="active">
	                            <a href="#change-password">Change Password</a>
	                        </li>
	                        <li>
	                            <a href="#newsletter">Newsletter</a>
	                        </li>
	                    </ul>
	                    <div id="change-password" class="tabs-content clearfix">
	                    	<div class="cols clearfix">
								<p class="left grid_7">
								   <label for="old-password">Old Password</label><br>
								   <input type="password" id="old-password" name="old-password" class="disabled" disabled="disabled"/>
								</p>
							</div>
							<div class="cols clearfix">
								<p class="left grid_7">
								   <label for="new-password">New Password</label><br>
								   <input type="password" id="new-password" name="new-password" class="success"/>
								   <span class="help-block success">Ini pesan klo sukses bro!</span>
								</p>
							</div>
							<div class="cols clearfix">
								<p class="left grid_7">
								   <label for="re-password">Re-type Password</label><br>
								   <input type="password" id="re-password" name="re-password" class="error"/>
								    <span class="help-block error">Ini pesan klo gagal bro!</span>
								</p>
							</div>
							<div class="submit left clearfix">
		                    	<input type="submit" value="Change" class="button"/>
		                    </div>
	                    </div>
	                    <div id="newsletter" class="tabs-content clearfix">
	                    	<div class="cols clearfix">
		                    	<p class="left grid_11">I hereby agree to receive future communication & newsletter from Hi-Indonesia and its partner.</p>
		                    	<p class="right grid_3">
		                    		<select id="newsletter-subs" name="newsletter-subs">
			                    		<option value="yes">Yes</option>
										<option value="no">No</option>
		                    		</select>
		                    	</p>
	                    	</div>
	                    </div>
	                </div>
	            </div>
			</div>
		</section>
		<footer>
			<nav class="clearfix">
				<ul class="bottom-nav grid_24">
		          <li><a href="#">About Us</a></li>
		          <li><a href="#">FAQ</a></li>
		          <li><a href="#">Contact Us</a></li>
		          <li><a href="#">Jobs</a></li>
		          <li><a href="#">Our Partner</a></li>
		          <li><a href="#">Press</a></li>
		        </ul>
	        </nav>
	        <section class="footer">
	        	<div class="footer-wrapper clearfix">
		        	<div class="footer-left grid_12">
		        		<ul>
		        			<li><a href="#">Terms of service</a></li>
		        			<li><a href="#">Privacy</a></li>
		        			<li><a href="#">Feedback & support</a></li>
		        		</ul>
		        		<div class="copyright">
		        			&copy; 2013 Hi-Indonesia. All rights reserved.
		        		</div>
		        	</div>
		        	<div class="footer-right grid_12">
		        		<ul>
		        			<li><a href="#">English</a></li>
		        			<li><a href="#">Bahasa</a></li>
		        		</ul>
		        	</div>
	        	</div>
	        </section>
		</footer>
	</div>
</body>
</html>